<template>
    <a-modal v-model="visible"
             :title="title"
             @ok="handleOk"
             @cancel="cancel"
             centered
             width="40em"
             :cancelText="cancelText"
             :okText="okText">
        <a-form-model
                ref="form"
                :model="courseRecord"
                :rules="rules"
                :label-col="{ span: 5 }"
                :wrapper-col="{ span: 16 }"
        >
            <a-form-model-item label="课程编号" prop="code">
                <a-input v-model="courseRecord.code"/>
            </a-form-model-item>
            <a-form-model-item label="课程名称" prop="name">
                <a-input v-model="courseRecord.name"/>
            </a-form-model-item>
        </a-form-model>
    </a-modal>
</template>

<script>
    import { mapState } from "vuex";
    const rules={
        code:[{ required: true, message: '请输入课程编号!',trigger: 'change'}],
        name:[{ required: true, message: '请输入课程名称!',trigger: 'change'}],
    }
    export default {
        name: "AddCourse",
        data(){
            return{
                rules,//表格检验
                title:'',//Modal标题
                flag:false,//判断当前是添加还是编辑
                visible:false,//Modal是否可见
                cancelText:'',//取消按钮文字
                okText:'',//确认按钮文字
                courseRecord:{
                    courseId:'',
                    name:'',
                    code:'',
                },
            }
        },
        methods:{
            //根据参数record，判断是添加课程还是修改课程
            showModel(record){
                this.visible=true;
                //通过CpurseList组件传来的值record，来判断是添加还是修改
                if(record==''){
                    this.title='新建课程信息';
                    this.cancelText='取消';
                    this.okText='添加';
                    this.flag=false
                    this.courseRecord.courseId='';
                    this.courseRecord.name='';
                    this.courseRecord.code='';
                }else{
                    this.title='修改课程信息';
                    this.cancelText='取消';
                    this.okText='修改';
                    this.flag=true
                    this.courseRecord.courseId=record.courseId;
                    this.courseRecord.name=record.name;
                    this.courseRecord.code=record.code;
                }
            },
            //确定时回调
            handleOk(){
                if(this.flag==false){
                    //新增
                    this.$refs.form.validate(value=>{
                        if(value){//检验为真时，触发

                            this.$store.dispatch("courseList/addCourse",{courseRecord: this.courseRecord,token:this.accessState.token})
                                .then(()=>{
                                    console.log("课程数据",this.courseRecord);
                                    this.$message.success("添加课程成功");
                                    this.visible=false;
                                    this.$refs.form.resetFields();//重置表单数据（重置到所附的值）
                                    this.$emit("get")
                            }).catch(err=>{
                                this.$message.error(err.msg);
                            });
                        }else {
                            this.$message.error("请正确填写表单");
                        }
                    })
                }else{
                    //修改课程信息
                    this.$refs.form.validate(value=>{
                        if(value){
                            this.$store.dispatch("courseList/modifyCourse",{courseRecord:this.courseRecord,token:this.accessState.token})
                            .then(()=>{
                                    this.$message.success("修改课程成功");
                                    this.visible=false;//Modal设为不可见
                                    this.$refs.form.resetFields();//重置表单数据（重置到所附的值）
                                    this.$emit("gett")//触发gett，由父组件接受
                            }).catch(err=>{
                                this.$message.error(err.msg);
                            });
                        }else {
                            this.$message.error("请正确填写表单");
                        }
                    })
                }
            },
            //取消时回调
            cancel(){
                this.$refs.form.resetFields();//重置表单
                this.visible=false;//Modal设为不可见
            }
        },
        computed: {
            ...mapState({ // 这个是提取store中access文件夹目录下的数据
                'accessState': 'access'
            })
        }
    }
</script>

<style scoped>

</style>
